<template>
  <el-select
    v-model="currValue"
    filterable
    v-bind="$attrs"
    :filter-method="userFilter"
    :disabled="disabled"
    :clearable="clearable"
    v-el-select-loadmore:rangeNum="loadMore(max)"
    @visible-change="visibleChange"
    style="width: 100%"
    @change="change"
  >
    <el-option
      v-for="option in renderOption.slice(0, max)"
      :key="option.companyId"
      :label="option.companyName"
      :value="option.companyId"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  name: "easyselect",
  directives: {
    "el-select-loadmore": {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function() {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) binding.value();
        });
      }
    }
  },
  props: {
    value: {
      type: [String, Number],
      default: ""
    },
    // max: {
    //   type: Number,
    //   default: 50,
    // },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      max: 20,
      renderOption: []
    };
  },
  computed: {
    currValue: {
      get() {
        return this.value || "";
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  },
  watch: {
    value() {
      this.addValueOptions();
    },
    options: {
      handler(V) {
        this.init();
      },
      deep: true
    }
  },
  created() {
    this.init();
  },
  methods: {
    loadMore() {
      return () => (this.max += 20);
    },
    visibleChange(flag) {
      // console.log(flag, "下拉框显示隐藏");
      if (flag) {
        this.max = 20;
      }
    },
    async init() {
      this.userFilter();
      this.addValueOptions();
    },
    addValueOptions() {
      if (this.currValue) {
        console.log(this.currValue, "v-model");
        let target = this.options.find(item => {
          // 从大option中找到当前条
          return item.companyId === this.currValue;
        });
        if (target) {
          // 将当前条与小option比对，没有则加入
          if (
            this.renderOption.every(item => item.companyId !== target.companyId)
          ) {
            this.renderOption.unshift(target);
          }
        }
      }
    },
    addFilterOptions(label) {
      // 每次查找输入时，若有精确匹配的条目，保证该条目一定在renderOption内
      let target = this.options.find(item => {
        // 从大option中找到当前条
        return item.companyName === label;
      });
      if (target) {
        // 将当前条与小option比对，没有则加入
        if (this.renderOption.every(item => item.label !== target.label)) {
          this.renderOption.unshift(target);
        }
      }
    },
    userFilter(query = "") {
      //this.$emit('input', value)
      let arr = this.options.filter(item => {
        //return item.label.indexOf(query) !=-1
        return item.companyName.toLowerCase().indexOf(query.toLowerCase()) > -1;
      });
      // this.renderOption = arr;
      console.log(this.renderOption, "数据初始化");
      if (arr.length > this.max) {
        this.renderOption = arr
        // this.renderOption = arr.slice(0, this.max);
        this.addFilterOptions(query);
      } else {
        this.renderOption = arr;
      }
    },
    change(value) {
      this.$emit("change", value);
      if (!value) {
        // 单选清空-optons初始化下
        this.userFilter();
      }
    }
  }
};
</script>
